<fieldset>
    <legend>创建商品</legend>
    <input type="hidden" name="goods.id" value="${(goods.id)!}"/>

    <div>
        <label>商品名称</label>
        <input type="text" name="goods.name" value="${(goods.name)!}"/><span class="error">${nameMsg!}</span>
    </div>
    <div>
        <label>商品图片</label>

        <div>

            <div style="text-align: center;clear: both;" class="box">
                <img class="goodsImg" src="${(goods.img)!}"/>
                <span>默认</span>
            </div>
            <div style="margin: 10px auto;display: none;" id="imgBox">
                <label>相册</label>
                <#if  goods?? && goods.imgList??>
                    <#list goods.imgList as ig>
                        <div class="box">
                            <img src="${ig!}"/>
                            <input type="radio" name="radio"
                            <#if goods.img == ig>checked</#if>
                            class="defaultImg"/>
                            <i class="icon-remove" style="margin-top: 3px;"></i>
                        </div>
                    </#list>
                </#if>
            </div>
        </div>
        <input type="hidden" id="goodsImg" name="goods.img" value="${(goods.img)!}"/>
        <input type="hidden" id="goodsImgs" name="goods.imgs" value="${(goods.imgs)!}"/>
        <a href="#myModal" role="button" class="btn" data-toggle="modal">上传商品图片</a>
        <span class="error">${imgMsg!}</span>
    </div>
    <div>
        <label>单价(元)</label>
        <input type="text" onchange="setRebate()" name="goods.price" id="price" class="number"
               value="${(goods.price)!}"/><span
            class="error">${priceMsg!}</span>
    </div>
    <div>
        <label>市场价(元)</label>
        <input type="text" onchange="setRebate()" name="goods.market" class="number" id="market"
               value="${(goods.market)!}"/>
    </div>
    <div>
        <label>折扣</label>
        <input type="text" name="goods.rebate" id="rebate" readonly class="number span2" value="${(goods.rebate)!}"/> 折
    </div>
    <div>
        <label>商品类型</label>
        <#if categorys??>
            <select name="goods.categoryId">
                <option value="${(goods.categoryId)!}">请选择...</option>
                <#list categorys as c>
                    <option value="${c.id}">${c.name!}</option>
                </#list>
            </select>
        </#if>
    </div>
    <div>
        <label>商品详情</label>
        <textarea name="goods.content" id="goods.content" class="span8" rows="10">${(goods.content)!}</textarea>
    </div>
    <div>
        <label>备注说明</label>
        <textarea name="goods.memo" class="span8" rows="5">${(goods.memo)!}</textarea>
    </div>
    <div>
        <label>&nbsp;</label>
        <input class="btn btn-primary" value="提交" type="submit">
    </div>
</fieldset>
<script src="/ckeditor/ckeditor.js" type="text/javascript"></script>
<script>

    function setRebate() {
        var rebate = $("#price").val() / $("#market").val() * 10;
        if (rebate != Infinity && rebate != NaN) {
            $("#rebate").val(rebate.toFixed(1));
        }
    }

    $(function () {


        CKEDITOR.replace("goods.content");
        $("#imgIframe").load(function (data) {
            var $targetImg = $("#imgIframe").contents().find("img#previewImg");
            var imgId = $targetImg.attr("imgId");

            if (imgId) {
                $("#myModal").modal("hide");
            }

        });

        $("img").error(function () {
            $(this).hide();
        });

        var setDefaultImg = function (target, src) {
            if (target.checked) {
                $(".goodsImg").attr("src", src).show();
                $("#goodsImg").val(src);
            }
        }

        var setOrFirstDefaultImg = function () {
            if ($("[name=radio]:radio").length < 1) {
                $(".box").hide();
                $("#imgBox").hide();
                $("#goodsImg").val("");
                return;
            }
            if (!$("[name=radio]:radio")[0].checked) {
                $("[name=radio]:radio")[0].click();
            }

        }

        var removeImg = function (target) {
            var src = $(target).parent().find("img").attr("src");
            var imgs = $("#goodsImgs").val();
            imgs = imgs.replace("||" + src, "");
            $("#goodsImgs").val(imgs);
            $(target).parent().remove();
            setOrFirstDefaultImg();
        }

        $("[name=radio]:radio").click(function () {
            var src = $(this).parent().find("img").attr("src");
            setDefaultImg(this, src);
        });

        $(".icon-remove").click(function () {
            removeImg(this);
        });


        $("#myModal").on("hidden", function () {
            var $targetImg = $("#imgIframe").contents().find("img#previewImg");
            var imgId = $targetImg.attr("imgId");
            if (imgId) {
                var box = $("<div class='box' />");
                var img = $("<img />");
                var imgBox = $("#imgBox");
                var imgSrc = $targetImg.attr("src");
                var radio = $("<input type='radio' name='radio'/> ");
                var remove = $('<i class="icon-remove" style="margin-top: 3px;"></i>');

                img.attr("src", imgSrc);
                box.append(img);
                box.append(radio);
                imgBox.append(box);


                radio.click(function () {
                    setDefaultImg(this, imgSrc);
                });

                remove.click(function () {
                    removeImg(this);
                });
                $("#goodsImgs").val($("#goodsImgs").val() + "||" + imgSrc);
                $(".box").show();
                $("#imgBox").show();
                setOrFirstDefaultImg();
            }
            var src = "/plugin/jcrop.jsp?" + new Date().getTime();
            $("#imgIframe").attr("src", src);
        });


        if ($("#imgBox img").length > 0) {
            $("#imgBox").show();
        }
    });
</script>

<!-- Button to trigger modal -->


<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     style="height: 80%;width: 80%;margin-left: -40%;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">上传商品图片</h3>
    </div>
    <div class="modal-body"
         style="position: absolute;top: 50px;left: 0px;right: 0px;bottom: 0px;overflow-y: hidden;padding: 0px;max-height: 100%;">
        <iframe id="imgIframe" src="/plugin/jcrop.jsp" style="border: none;height: 100%;width: 100%;"></iframe>
    </div>
    <!--<div class="modal-footer">-->
    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true"
            style="position: absolute;right: 190px;bottom: 14px;">关 闭
    </button>
    <!--<button class="btn btn-primary">Save changes</button>-->
    <!--</div>-->
</div>

<script>
    $(function () {
        $("form").validate({
            rules: {
                "goods.price": {
                    required: true,
                    number: true
                },
                'goods.categoryId': 'required'
            },
            messages: {
                "goods.price": {
                    number: "单价输入不正确，只能为数字！",
                    required: "单价必填！"
                },
                'goods.categoryId': "商品类型必填！",
                'goods.market': "市场价输入不正确，只能为数字！",
                'goods.rebate': "折口不正确，请输入正确的价格！！"
            }

        });
    });

    $(function () {
        //设置类型的级连选择
        var setSelectFileds = function ($select) {
            $select.unbind("change").change(function () {
                var _self = $(this);
                _self.attr("name", "goods.categoryId");
                while (_self.next("select").length) {
                    var next = _self.next("select");
                    next.remove();
                }
                if ($(this).val() && $(this).val() != "${(goods.categoryId)!}") {
                    $.get("/admin/category/child/" + $(this).val(), function (data) {
                        if (data.categorys.length > 0) {
                            _self.removeAttr("name");
                            var select = $("<select />");
                            select.attr("name", "goods.categoryId");
                            var options = new Array();
                            var topOne = $("<option />");
                            topOne.val("").html("请选择...");
                            options.push(topOne);
                            $.each(data.categorys, function (i, item) {
                                var option = $("<option />");
                                option.val(item.id).html(item.name);
                                options.push(option);
                            });
                            select.html(options);
                            _self.after(select);
                            setSelectFileds(select);
                        }
                    }, "json");
                }


            });
        }
        setSelectFileds($("select[name='goods.categoryId']"));
    });

</script>

<style>
    #imgBox img {
        margin: 5px;
    }

    .box {
        display: inline-block;
        width: 140px;
        text-align: center;
        /*float: left;*/
    }

    select {
        width: auto;
    }
</style>